<template>
  <view id="main">
    <swiper disable-touch class="swiper" :current :duration="300">
      <swiper-item>
        <view class="card" style="margin-top: 40px">
          <text class="title">服务器地址配置</text>
          <view style="width: 100%">
            <view class="label">
              <image src="@/static/icon/server.png" class="icon" mode="scaleToFill" />
              服务器地址
            </view>
            <view class="inputCard">
              <input v-model="mediaStore.baseURL" type="text" placeholder="请输入服务器地址" />
              <image
                v-show="mediaStore.baseURL"
                src="@/static/icon/login-close.png"
                class="icon"
                mode="scaleToFill"
                @tap.stop="mediaStore.baseURL = ''"
              />
            </view>
          </view>
          <button
            class="button"
            :style="mediaStore.baseURL ? {} : { opacity: 0.7 }"
            @tap.stop="goLogin('Server')"
          >
            下一步
          </button>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="card" style="height: 400px">
          <view class="titleCard">
            <text class="title">检测端</text>
            <text>野战医疗队指挥管理系统</text>
          </view>
          <view style="width: 100%; margin-bottom: 6px">
            <view class="label">
              <image src="@/static/icon/user.png" class="icon" mode="scaleToFill" />
              账号
            </view>
            <view class="inputCard">
              <input v-model="user.username" type="text" placeholder="请输入账号" />
              <image
                v-show="user.username"
                src="@/static/icon/login-close.png"
                class="icon"
                mode="scaleToFill"
                @tap.stop="user.username = ''"
              />
            </view>
          </view>
          <view style="width: 100%">
            <view class="label">
              <image src="@/static/icon/Password.png" class="icon" mode="scaleToFill" />
              密码
            </view>
            <view class="inputCard">
              <input
                v-model="user.password"
                :password
                type="text"
                placeholder="请输入密码"
                @confirm="goLogin('Login')"
              />
              <view class="imageCard" v-show="user.password">
                <image
                  src="@/static/icon/login-close.png"
                  class="icon"
                  mode="scaleToFill"
                  @tap.stop="user.password = ''"
                />
                <image
                  v-show="user.password"
                  :src="`../../static/icon/${password ? 'view_off' : 'view'}.png`"
                  class="icon"
                  mode="scaleToFill"
                  @tap.stop="password = !password"
                />
              </view>
            </view>
          </view>
          <view class="butCard">
            <view class="severBut" @tap.stop="current = 0">服务器配置</view>
            <button
              class="button"
              :disabled="!user.username || !user.password"
              :style="user.username && user.password ? {} : { opacity: 0.7 }"
              @tap.stop="goLogin('Login')"
            >
              登录
            </button>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
  <yz-tips v-if="toast.show" :title="toast.title"> </yz-tips>
</template>

<script lang="ts" setup>
import { useMediaStore } from '@/stores/modules/media'
import { useUserStore } from '@/stores/modules/user'
import { reactive, ref } from 'vue'
import { useToastStore } from '@/stores/modules/toast'
const toast = useToastStore()
const mediaStore = useMediaStore()
const userStore = useUserStore()

const user = reactive({
  username: '',
  password: '',
}) // 用户登录信息

let current = ref(0) // swper显示的item索引
let password = ref(true) // 控制密码输入框显示与隐藏

// 点击按钮方法
const goLogin = (state: string) => {
  if (state === 'Server') {
    if (!mediaStore.baseURL) {
      uni.showModal({
        title: '服务器配置失败',
        content: '服务器配置无效，请查看是否正确填写服务器地址',
        showCancel: false,
      })
      return
    }
    current.value = 1
  } // '下一步'
  if (state === 'Login') {
    if (!user.username || !user.password) return
    userStore.getLogin(user)
  }
}
</script>

<style lang="scss" scoped>
#main {
  background-image: url('~@/static/login/bg.png');
  background-size: cover;
  height: 100vh;
  .swiper {
    width: 100%;
    height: 426px;
    margin: 100px auto 0;
  }
  .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 336px;
    height: 336px;
    margin: 0 auto;
    padding: 30px 20px;
    background-color: #ffffff;
    border-radius: 8px;
    .titleCard {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 28px;
    }
    .title {
      font-size: 21px;
      font-weight: 700;
    }
    .label {
      display: flex;
      align-items: center;
      width: 100%;
    }
    .inputCard {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 44px;
      padding: 0 12px;
      margin-top: 12px;
      border-radius: 10px;
      background-color: #f5f5f5;
    }
    .imageCard {
      display: flex;
      justify-content: space-between;
      width: 56px;
    }
    .butCard {
      display: grid;
      grid-template-columns: 2fr 3fr;
      grid-column-gap: 10px;
      width: 100%;
      margin-top: 20px;
      .severBut {
        width: 100%;
        height: 46px;
        line-height: 46px;
        text-align: center;
        color: #ffffff;
        border-radius: 10px;
        background-color: #08121e;
      }
    }
  }
}
.uni-input-placeholder {
  color: #dbdbdb;
}
</style>
